<template>
  <div class="home">
    <el-row
      class="first"
      style="width: auto; padding-top: 10%; padding-bottom: 3%"
      v-if="!isSearch"
    >
      <el-col :span="12" :offset="6"><h1 class="slogan">心语成画</h1></el-col>
    </el-row>
    <!--    <button @click="generateVideo(story)">test</button>-->
    <el-row class="second" style="width: auto" v-if="!isSearch">
      <el-col :span="16" :offset="4">
        <el-input
          @focus="handleInputFocus"
          @blur="handleInputBlur"
          placeholder="请概述您的故事"
          v-model="inputText"
          clearable
          @keyup.enter="generatePic(LengthValue, ParaValue, StyleValue)"
        >
          <template #prefix>
            <div id="voice"></div>
            <div class="voice-input-button-wrapper">
              <voice-input-button
                appId="c5d5f287"
                apiKey="7a6d716e393d7eca139540949a397323"
                apiSecret="MTE3MThhMmViY2ZjNDhmZWRlMzkyZDQz"
                color="#ACAFB6"
                tipPosition="top"
                interactiveMode="touch"
                v-model="result"
                :record="showResult"
                :record-start="recordStart"
                :record-stop="recordStop"
                :record-blank="recordNoResult"
                :record-failed="recordFailed"
                :record-ready="recordReady"
                :record-complete="recordComplete"
              >
                <template v-slot:no-speak>没听清您说的什么</template>
              </voice-input-button>
              <!-- <el-icon class="el-input__icon" :size="20"><search /></el-icon> -->
            </div>
          </template>
          <template #append>
            <el-button @click="generatePic(LengthValue, ParaValue, StyleValue)"
              >确定
            </el-button>
          </template>
        </el-input>
      </el-col>
      <el-col
        :span="4"
        style="text-align: left; display: flex; align-items: center"
      >
        <span style="padding-left: 10px; cursor: grab" @click="handlemore()"
          ><Tools style="width: 1.5em; height: 2em; color: #b0b3ba" /></span
      ></el-col>
    </el-row>
    <el-row v-show="!isSearch" class="third" style="width: auto">
      <el-col :span="16" :offset="4">
        <div style="margin-top: 3px">
          <div
            class="txt2"
            style="letter-spacing: 2px; color: #c7a46c; margin-top: 30px"
          >
            心想即可成画！
          </div>
        </div>
      </el-col>
    </el-row>
    <br />
    <el-dialog
      v-model="dialogVisible"
      width="20%"
      :before-close="handleClose"
      style="background-color: #2a303c"
      draggable
      center
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h3
            :id="titleId"
            :class="titleClass"
            style="color: #a6adba; letter-spacing: 2px"
          >
            个性化设置
          </h3>
        </div>
      </template>
      <div class="set">
        <span style="font-size: 1.15rem; font-weight: 50; color: #a6adba"
          >文章长度:&nbsp;&nbsp;&nbsp;</span
        >
        <el-select
          v-model="LengthValue"
          class="m-2"
          placeholder="设置文章长度"
          size="small"
          style="width: 50%"
        >
          <el-option
            v-for="item in LengthOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="set" style="margin-top: 10px">
        <span style="font-size: 1.15rem; font-weight: 50; color: #a6adba"
          >文章段落:&nbsp;&nbsp;&nbsp;</span
        >
        <el-select
          v-model="ParaValue"
          class="m-2"
          placeholder="设置文章段落数"
          size="small"
          style="width: 50%"
        >
          <el-option
            v-for="item in ParaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="set" style="margin-top: 10px">
        <span style="font-size: 1.15rem; font-weight: 50; color: #a6adba"
          >插画风格:&nbsp;&nbsp;&nbsp;</span
        >
        <el-select
          v-model="StyleValue"
          class="m-2"
          placeholder="设置生成插画风格"
          size="small"
          style="width: 50%"
        >
          <el-option
            v-for="item in StyleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- <div class="set" style="margin-top: 10px">
        <span style="font-size: 1.15rem; font-weight: bold; color: #a6adba"
          >默认语言:&nbsp;&nbsp;&nbsp;</span
        ><el-select
          v-model="LangValue"
          class="m-2"
          placeholder="设置生成文章的语言"
          size="small"
          style="width: 50%"
        >
          <el-option
            v-for="item in LangOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="(dialogVisible = false), refresh()"
            >复原</el-button
          >
          <el-button
            color="#626aef"
            type="primary"
            @click="(dialogVisible = false), confirm()"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!--    提问后-->
    <el-row class="third" style="width: auto; padding-left: 0" v-if="isSearch">
      <el-col :span="1" style="text-align: left; display: flex">
        <span
          style="padding-left: 10px; padding-top: 8px; cursor: grab"
          @click="this.isSearch = false"
          ><Back style="width: 1.5em; height: 2em; color: #b0b3ba" /></span
      ></el-col>
      <el-col :span="9">
        <el-row>
          <el-input
            @focus="handleInputFocus"
            @blur="handleInputBlur"
            placeholder="请概述您的故事"
            v-model="inputText"
            clearable
            @keyup.enter="generatePic(LengthValue, ParaValue, StyleValue)"
          >
            <template #prefix>
              <div id="voice"></div>
              <div class="voice-input-button-wrapper">
                <voice-input-button
                  appId="c5d5f287"
                  apiKey="7a6d716e393d7eca139540949a397323"
                  apiSecret="MTE3MThhMmViY2ZjNDhmZWRlMzkyZDQz"
                  color="#ACAFB6"
                  tipPosition="bottom"
                  interactiveMode="touch"
                  v-model="result"
                  :record="showResult"
                  :record-start="recordStart"
                  :record-stop="recordStop"
                  :record-blank="recordNoResult"
                  :record-failed="recordFailed"
                  :record-ready="recordReady"
                  :record-complete="recordComplete"
                >
                  <template v-slot:no-speak>没听清您说的什么</template>
                </voice-input-button>
                <!-- <el-icon class="el-input__icon" :size="20"><search /></el-icon> -->
              </div>
            </template>
            <template #append>
              <el-button
                class="phoneCode"
                @click="generatePic(LengthValue, ParaValue, StyleValue)"
                >确定
              </el-button>
            </template>
          </el-input>
        </el-row>
        <el-row style="margin-top: 10px">
          <div class="videoPlace" v-show="options.src.length != 0">
            <vue3VideoPlay
              v-bind="options"
              poster="https://fengru-pic.oss-cn-beijing.aliyuncs.com/3D%E8%99%9A%E6%8B%9F%E4%BA%BA%E7%A4%BA%E6%84%8F%E5%9B%BEnew.jpg"
              @pause="handlePause()"
              @canplay="onCanplay()"
            />
          </div>
          <div class="videoPlaceLoading" v-show="options.src.length == 0">
            <PlanetLoading></PlanetLoading>
          </div>
        </el-row>
      </el-col>
      <el-col :span="1" style="text-align: left; display: flex">
        <span style="padding-left: 10px; padding-top: 8px"
          ><Tools
            @click="handlemore()"
            style="
              width: 1.5em;
              height: 2em;
              color: #b0b3ba;
              cursor: grab;
            " /></span
      ></el-col>
      <el-col :span="12">
        <el-carousel
          :interval="5000"
          height="510px"
          trigger="click"
          @change="changePage"
          :autoplay="false"
          @setActiveItem="setActiveItem"
          ref="carousel"
        >
          <el-carousel-item v-for="(item, index) in story" :key="index">
            <!--              <img :src="item.url" @click="viewPic(item)"/>-->
            <!--            该写法使图片自适应容器-->
            <!--            :preview-teleported="true"指的是图片全屏预览-->
            <ElImage
              :src="item.pic"
              fit="fit"
              style="object-fit: scale-down; width: 100%; height: 100%"
              :preview-src-list="srcList"
              :preview-teleported="true"
              @click="handleSrcList(item.pic)"
            >
              <template #error>
                <div class="image-slot">
                  <loading2></loading2>
                </div>
              </template>
            </ElImage>
          </el-carousel-item>
        </el-carousel>
        <el-divider style="margin-top: 15px; margin-bottom: 5px"></el-divider>

        <div class="txt">
          <span class="txtLoad" v-if="story[paraIndex].Chinese.length == 0">
            <span style="--i: 1">故</span>
            <span style="--i: 2">事</span>
            <span style="--i: 3">内</span>
            <span style="--i: 4">容</span>
            <span style="--i: 5">加</span>
            <span style="--i: 6">载</span>
            <span style="--i: 7">中</span>
            <span style="--i: 8">.</span>
            <span style="--i: 9">.</span>
            <span style="--i: 10">.</span>
            <span style="--i: 11">.</span></span
          >
          <span v-else
            ><span v-if="showChinese"
              >{{ story[paraIndex].Chinese
              }}<span
                style="
                  vertical-align: middle;
                  cursor: pointer;
                  margin-left: 10px;
                "
                title="点击聆听文本内容"
                @click="playAudio(story[paraIndex].Chinese, paraIndex, 'Ch')"
                ><svg
                  t="1678104113047"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2526"
                  width="18.5"
                  height="18.5"
                  style="padding-top: 7px"
                >
                  <path
                    d="M460.8 128c-6.4-6.4-19.2-6.4-32 0L224 281.6h-192c-19.2 0-32 19.2-32 32V704c0 19.2 12.8 32 32 32h192L428.8 896c6.4 0 12.8 6.4 19.2 6.4 6.4 0 12.8 0 12.8-6.4 12.8-6.4 19.2-19.2 19.2-25.6V153.6c0-6.4-6.4-19.2-19.2-25.6z m-44.8 678.4L256 684.8c-6.4-6.4-12.8-6.4-19.2-6.4H64V345.6h172.8c6.4 0 12.8 0 19.2-6.4l160-121.6v588.8zM857.6 512c0-115.2-57.6-224-153.6-268.8-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 70.4 32 115.2 115.2 115.2 211.2 0 96-44.8 172.8-115.2 211.2-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 102.4-44.8 160-153.6 160-268.8z"
                    p-id="2527"
                    fill="#2894FF"
                  ></path>
                  <path
                    d="M601.6 364.8c-12.8-6.4-32 0-44.8 12.8s0 32 12.8 44.8c32 12.8 51.2 51.2 51.2 89.6 0 38.4-19.2 76.8-51.2 89.6-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 57.6-25.6 89.6-83.2 89.6-147.2 0-64-32-121.6-83.2-147.2zM812.8 134.4c-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 108.8 51.2 179.2 179.2 179.2 320s-70.4 268.8-179.2 320c-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 128-64 211.2-211.2 211.2-377.6 6.4-166.4-76.8-313.6-204.8-377.6z"
                    p-id="2528"
                    fill="#2894FF"
                  ></path>
                </svg> </span
            ></span>
            <span v-else
              >{{ translateMsg[paraIndex].dst
              }}<span
                style="
                  vertical-align: middle;
                  cursor: pointer;
                  margin-left: 10px;
                "
                title="点击聆听文本内容"
                @click="playAudio(translateMsg[paraIndex].dst, paraIndex, 'en')"
                ><svg
                  t="1678104113047"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2526"
                  width="18.5"
                  height="18.5"
                  style="padding-top: 7px"
                >
                  <path
                    d="M460.8 128c-6.4-6.4-19.2-6.4-32 0L224 281.6h-192c-19.2 0-32 19.2-32 32V704c0 19.2 12.8 32 32 32h192L428.8 896c6.4 0 12.8 6.4 19.2 6.4 6.4 0 12.8 0 12.8-6.4 12.8-6.4 19.2-19.2 19.2-25.6V153.6c0-6.4-6.4-19.2-19.2-25.6z m-44.8 678.4L256 684.8c-6.4-6.4-12.8-6.4-19.2-6.4H64V345.6h172.8c6.4 0 12.8 0 19.2-6.4l160-121.6v588.8zM857.6 512c0-115.2-57.6-224-153.6-268.8-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 70.4 32 115.2 115.2 115.2 211.2 0 96-44.8 172.8-115.2 211.2-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 102.4-44.8 160-153.6 160-268.8z"
                    p-id="2527"
                    fill="#2894FF"
                  ></path>
                  <path
                    d="M601.6 364.8c-12.8-6.4-32 0-44.8 12.8s0 32 12.8 44.8c32 12.8 51.2 51.2 51.2 89.6 0 38.4-19.2 76.8-51.2 89.6-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 57.6-25.6 89.6-83.2 89.6-147.2 0-64-32-121.6-83.2-147.2zM812.8 134.4c-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 108.8 51.2 179.2 179.2 179.2 320s-70.4 268.8-179.2 320c-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 128-64 211.2-211.2 211.2-377.6 6.4-166.4-76.8-313.6-204.8-377.6z"
                    p-id="2528"
                    fill="#2894FF"
                  ></path>
                </svg> </span
            ></span>
            <audio
              ref="audio"
              class="aud"
              :src="audioSrc"
              @ended="end()"
            ></audio
          ></span>
          <span
            v-if="story[paraIndex].Chinese.length != 0"
            style="vertical-align: middle; cursor: pointer; margin-left: 10px"
            title="点击切换语言"
            @click="(showChinese = !showChinese), translateAudio()"
            ><svg
              t="1678695424908"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2840"
              width="18.5"
              height="18.5"
              style="padding-top: 7px"
            >
              <path
                d="M846.04 866.77c-17.08 2.03-32.57-10.18-34.59-27.26-0.22-1.9-0.27-3.81-0.15-5.71v-123c0-33.73-22.17-33.73-30.53-33.73-21.28-0.46-38.91 16.43-39.36 37.72-0.01 0.46-0.01 0.92 0 1.37v117.66c-0.76 18.9-16.71 33.61-35.61 32.84-17.83-0.72-32.12-15.01-32.84-32.84V647.68c-1.23-17.23 11.74-32.19 28.97-33.41 1.69-0.12 3.39-0.1 5.08 0.05a31.953 31.953 0 0 1 31.33 17.76 89.435 89.435 0 0 1 54.99-17.76c54.11 0 86.45 33.59 86.45 90.03V833.8a32.25 32.25 0 0 1-8.88 23.72 34.026 34.026 0 0 1-24.82 9.33l-0.04-0.08z m-233.12-7.46h-134.7c-42.77 0-61.85-18.96-61.85-61.57V608.07c0-42.52 19.09-61.57 61.85-61.57h128.74c17.92 0 32.45 14.53 32.45 32.45s-14.53 32.45-32.45 32.45H490.73c-1.22-0.08-2.45 0.09-3.6 0.5 0.13 0-0.15 0.8-0.15 2.89v52.58h106c16.33-1.66 30.91 10.24 32.57 26.57 0.17 1.68 0.2 3.37 0.08 5.06 0.98 16.66-11.73 30.97-28.4 31.95-1.41 0.08-2.83 0.07-4.24-0.05H486.9V791c-0.04 1.06 0.08 2.13 0.35 3.15 1.12 0.15 2.25 0.23 3.38 0.24h122.31c16.96-1.07 31.58 11.81 32.65 28.76 0.07 1.16 0.08 2.33 0.02 3.5 1.35 16.68-11.07 31.3-27.75 32.65-1.64 0.13-3.28 0.13-4.92 0h-0.02zM327.54 482.85c-17.36 2.36-33.34-9.8-35.7-27.16-0.3-2.21-0.37-4.44-0.2-6.67V370.5h-85.27c-45.86 0-66.31-20.52-66.31-66.31v-93.87c0-45.58 20.52-65.9 66.31-65.9h85.27v-31.53c-1.38-17.11 11.37-32.11 28.48-33.49 1.92-0.15 3.84-0.13 5.76 0.07 30.26 0 36.63 18.17 36.63 33.42v31.59h86.09c45.86 0 66.33 20.34 66.33 65.88v93.89c0 45.86-20.52 66.29-66.33 66.29h-86.05v78.52c1.25 17.47-11.9 32.65-29.37 33.91-1.88 0.13-3.76 0.1-5.63-0.1v-0.02zM217.21 211.27c-6.47 0-7.07 0.6-7.07 7.07v78.2c0 6.53 0.6 7.15 7.07 7.15h74.43v-92.42h-74.43z m145.35 92.38h75.29c6.29 0 7.09-0.8 7.09-7.07v-78.25c0-6.29-0.8-7.09-7.09-7.09h-75.31v92.42h0.02z m151.42 655.91C266.43 958.82 66.36 757.55 67.1 510c0.1-35 4.31-69.86 12.52-103.88 4.81-19 23.92-30.68 43.03-26.29 19.1 4.61 30.86 23.81 26.29 42.91-48.93 202.33 75.42 406.01 277.75 454.94a376.924 376.924 0 0 0 87.29 10.56c19.69 0.02 35.64 15.99 35.63 35.69-0.02 19.67-15.96 35.61-35.63 35.63z m398.49-310.05c-19.69 0-35.66-15.96-35.66-35.65 0-2.95 0.37-5.9 1.09-8.76 51.31-201.82-70.7-407.02-272.52-458.33-29.89-7.6-60.59-11.5-91.43-11.62-19.68 0-35.64-15.95-35.64-35.63 0-19.68 15.95-35.64 35.63-35.64h0.01c247.57 0.76 447.65 202.08 446.89 449.65-0.11 36.8-4.76 73.44-13.83 109.1-4 15.8-18.23 26.88-34.54 26.88z"
                fill="#2894FF"
                p-id="2841"
              ></path>
            </svg>
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Vue2InVue3 } from "@efox/emp-vuett";
import voiceInputButton from "voice-input-button2";
import md5 from "js-md5";
import { ElMessage } from "element-plus";
import loading from "@/components/loading.vue";
import loading2 from "@/components/loading2.vue";
import PlanetLoading from "@/components/PlanetLoading.vue";
import axios from "axios";
import { thisTypeAnnotation } from "@babel/types";

const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");
export default {
  name: "DrawPic",
  components: {
    "voice-input-button": ContentInVue3,
    loading,
    loading2,
    PlanetLoading,
  },
  watch: {
    story: {
      handler(oldVal, newVal) {
        if (newVal.length != 0) {
          this.translateMsg = [];
          if (newVal[0].Chinese == "") {
            console.log("还没有产生文本");
          } else {
            this.translate(newVal);
            console.log(this.translateMsg);
          }
        } else {
          console.log("还没有产生文本");
        }
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    if (this.story.length != 0) {
      this.translateMsg = [];
      this.translate(this.story);
      console.log(this.translateMsg);
    } else {
      console.log("还没有产生文本");
    }
  },
  data() {
    return {
      dialogVisible: false,
      isSearch: true,
      result: "",
      showChinese: true,
      options: {
        width: "361.25px", //播放器高度
        height: "640px", //播放器高度
        // webFullScreen: true, //开启网页全屏
        color: "#409eff", //主题色
        speed: true, //关闭进度条拖动^j5kF@!$
        title: "", //视频名称
        // src: "https://videorender.oss-cn-shanghai.aliyuncs.com/platform%2Fvideo%2F3d_paas%2F20534%2F71c333ec-d529-4feb-bac7-aeb712299b1f%2Fvideo.mp4?Expires=1679055672&OSSAccessKeyId=LTAI5tLFxiQvptGPnfyMfWnX&Signature=FQsqCvOvk%2FXDBw9LKs1HorSh7GA%3D", //视频源,
        src: "https://fengrucup.oss-cn-beijing.aliyuncs.com/video%20%2810%29.mp4",
        // src: "https://virtual-human-video.oss-cn-beijing.aliyuncs.com/3d_paas%2F20534%2F8d8f05ed-0477-41e9-88d0-8d227af5d5c1%2Fvideo.mp4?Expires=1679925245&OSSAccessKeyId=LTAI5tLFxiQvptGPnfyMfWnX&Signature=xtOp2Hqoy96rZC%2FTv9kpgR9%2FGXI%3D",
        control: false, //是否显示控制栏
        autoPlay: false, //是否自动播放
      },
      paragraphData: [
        "sdsd sds dss ",
        "会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话会撒娇的哈时间的话",
      ],
      pic1: [
        { url: require("../assets/logo3.png") },
        { url: require("../assets/bg.jpg") },
        { url: require("../assets/logo.png") },
        { url: require("../assets/logo2.png") },
      ],
      LengthOptions: [
        { value: 200, label: "200" },
        { value: 300, label: "300" },
        { value: 400, label: "400" },
        { value: 500, label: "500" },
        { value: 600, label: "600" },
      ],
      ParaOptions: [
        { value: 4, label: "4" },
        { value: 5, label: "5" },
        { value: 6, label: "6" },
        { value: 7, label: "7" },
        { value: 8, label: "8" },
      ],
      StyleOptions: [
        { value: "卡通", label: "卡通" },
        { value: "风景", label: "风景" },
        { value: "人物", label: "人物" },
        { value: "动物", label: "动物" },
        { value: "其他", label: "其他" },
      ],
      LangOptions: [
        { value: "中文", label: "中文" },
        { value: "英文", label: "英文" },
      ],
      srcList: [],
      editSize: false,
      size: 10,
      new_size: "",
      num: 5,
      new_num: "",
      info: "",
      LengthValue: "200",
      ParaValue: "4",
      StyleValue: "卡通",
      LangValue: "中文",
      paraIndex: 0,
      isplay: false,
      audioSrc: "",
      inputText: "",
      paraNum: 4,
      imgUrl: "",
      loading: false,
      ans: "",
      inSearch: false,
      api: "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",
      chatItems: [],
      text: "",
      txtArr: [{ role: "system", content: "You are a helpful assistant." }],
      question1: "Please generate a ",
      question2:
        " words children's story in Chinese for me. The theme of the story is ",
      question3: ". It has ",
      question4: " paragraphs and its style is ",
      question5:
        "  . Please don't mark the beginning of each paragraph with a serial number and don't add titles to the story. After each paragraph of Chinese, a one-sentence English description of the illustration is generated for each paragraph on a separate new  line,where the beginning of the English sentence is A painting of",
      story: [
        {
          Chinese:
            "从前，有一个小女孩，她很喜欢动物。有一天，她在森林里散步时，遇到了一只独角兽。小女孩非常开心，因为她从来没有见过独角兽。独角兽对她微笑，小女孩感觉非常温暖。",
          English:
            "Once upon a time, there was a little girl who liked animals very much. One day, while walking in the forest, she met a unicorn. The little girl was very happy because she had never seen a unicorn. The unicorn smiled at her, and the little girl felt very warm.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230328193810.jpg",
        },
        {
          Chinese:
            "小女孩和独角兽一起玩耍，他们一起跳跃和奔跑。独角兽还为小女孩制作了一个美丽的花环，她带上后非常开心。他们一起吃了美味的蓝莓，小女孩还分享了她的三明治。",
          English:
            "The little girl and the unicorn play together, they jump and run together. The unicorn also made a beautiful wreath for the little girl, and she was very happy with it. They ate delicious blueberries together, and the little girl shared her sandwich.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230328194512.jpg",
        },
        {
          Chinese:
            "当太阳开始下山时，小女孩觉得有点累了。独角兽用它的角制作了一张舒适的床铺，让小女孩可以休息。小女孩非常感激，她感觉自己非常幸福。",
          English:
            "When the sun began to set, the little girl felt a bit tired. The unicorn used its horns to make a comfortable bed for the little girl to rest. The little girl was very grateful and felt very happy.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/ee7ee8958c6838231f287f8be6bb5d7.jpg",
        },
        {
          Chinese:
            "第二天，小女孩醒来发现独角兽不见了。她感到失望，但她知道独角兽可能已经回到了它的家。小女孩回家后，她非常兴奋地和她的家人分享了她和独角兽在森林里度过的美好时光。",
          English:
            "The next day, the little girl woke up and found the unicorn missing. She was disappointed, but she knew that the unicorn might have returned to its home. After the little girl returned home, she was very excited to share with her family the wonderful time she had spent with the unicorn in the forest.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/4113027cfe41701a7642efd002343e6.png",
        },
      ],
      testText:
        "有一天，小熊维尼和跳跳虎决定一起去森林里玩耍。他们带着水壶和面包，准备在森林里野餐。可是，当他们到达森林时，发现水壶和面包都不见了。他们开始找寻，却发现有一个小松鼠把他们的食物拿走了。\n" +
        "\n" +
        "A painting of Winnie the Pooh and Tigger in the forest looking for their lost food, with a sneaky squirrel hiding in the background.\n" +
        "\n" +
        "小熊维尼和跳跳虎很生气，但他们决定不要放弃野餐的计划。他们开始四处找寻食物，最后发现了一座草屋。门敞开着，里面有许多美味的蜂蜜。小熊维尼和跳跳虎非常高兴，他们在草屋里吃了许多蜂蜜。\n" +
        "\n" +
        "A painting of Winnie the Pooh and Tigger happily feasting on honey inside a grass hut.\n" +
        "\n" +
        "吃完蜂蜜，小熊维尼和跳跳虎觉得很累了。他们决定在草屋里休息一会儿。可是，他们不小心把草屋弄倒了。他们感到很尴尬，但是很快就笑了起来。他们决定离开森林，回到家里。\n" +
        "\n" +
        "A painting of Winnie the Pooh and Tigger lying on the ground, surrounded by the wreckage of the grass hut, but still laughing and having a good time.\n" +
        "\n" +
        "小熊维尼和跳跳虎虽然没有野餐，但是他们度过了一个快乐的下午。他们知道下一次要更加小心，不要把草屋弄倒了。他们决定再次一起去森林里玩耍，下一次一定会更加开心。\n" +
        "\n" +
        "A painting of Winnie the Pooh and Tigger walking away from the forest, waving goodbye to the animals and trees, with big smiles on their faces.",
      translateMsg: [],
      translateText: "",
      translateStyle: "",
      videoIndex: 0,
      canGenPic: false,
    };
  },
  methods: {
    translate(msg) {
      var appid = "20230313001598518";
      var key = "RDFuoDA9KWreYtnZVOej";
      var salt = new Date().getTime();
      var query = "";
      // var query = msg;
      // 多个query可以用\n连接  如
      for (let i = 0; i < msg.length; i++) {
        query += msg[i].Chinese;
        if (i != msg.length - 1) {
          query += "\n";
        }
      }
      console.log(encodeURIComponent(query));
      var from = "zh";
      var to = "en";
      var str1 = appid + query + salt + key;
      var sign = md5(str1);
      var url =
        "http://api.fanyi.baidu.com/api/trans/vip/translate" +
        "?q=" +
        encodeURIComponent(query) +
        "&from=" +
        from +
        "&to=" +
        to +
        "&appid=" +
        appid +
        "&salt=" +
        salt +
        "&sign=" +
        sign;
      this.fetchJsonp(url)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          for (let i = 0; i < data.trans_result.length; i++) {
            this.translateMsg.push(data.trans_result[i]);
          }
        });
    },
    translateToText(msg) {
      var appid = "20230313001598518";
      var key = "RDFuoDA9KWreYtnZVOej";
      var salt = new Date().getTime();
      // var query = "";
      var query = msg;
      // 多个query可以用\n连接  如
      console.log(encodeURIComponent(query));
      var from = "zh";
      var to = "en";
      var str1 = appid + query + salt + key;
      var sign = md5(str1);
      var url =
        "http://api.fanyi.baidu.com/api/trans/vip/translate" +
        "?q=" +
        query +
        "&from=" +
        from +
        "&to=" +
        to +
        "&appid=" +
        appid +
        "&salt=" +
        salt +
        "&sign=" +
        sign;
      this.fetchJsonp(url)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          this.translateText = data.trans_result[0].dst;
        });
    },
    translateToStyle(msg) {
      var appid = "20230313001598518";
      var key = "RDFuoDA9KWreYtnZVOej";
      var salt = new Date().getTime();
      // var query = "";
      var query = msg;
      // 多个query可以用\n连接  如
      console.log(encodeURIComponent(query));
      var from = "zh";
      var to = "en";
      var str1 = appid + query + salt + key;
      var sign = md5(str1);
      var url =
        "http://api.fanyi.baidu.com/api/trans/vip/translate" +
        "?q=" +
        query +
        "&from=" +
        from +
        "&to=" +
        to +
        "&appid=" +
        appid +
        "&salt=" +
        salt +
        "&sign=" +
        sign;
      this.fetchJsonp(url)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          this.translateStyle = data.trans_result[0].dst;
        });
    },
    handlemore() {
      this.dialogVisible = true;
      console.log(this.dialogVisible);
    },
    handleSrcList(url) {
      this.srcList = [];
      this.srcList.push(url);
    },
    playAudio(msg, index, type) {
      console.log("begin");
      this.videoIndex = index;
      if (this.isplay) {
        this.$refs.audio.pause();
        this.isplay = false;
        return;
      } else {
        if (this.audioSrc != "") {
          this.$refs.audio.play();
          this.isplay = true;
          return;
        } else {
          this.$axios({
            url: " http://127.0.0.1:8000/api/speech",
            method: "get",
            params: { speech: msg, lang: type },
          }).then((res) => {
            console.log(res.data);
            this.audioSrc = res.data.src;
            console.log(this.audioSrc);
            setTimeout(() => {
              console.log(this.audioSrc);
              this.$refs.audio.play();
            }, 2000);
          });
          this.isplay = true;
        }
      }
    },
    setActiveItem(i) {
      console.log(this.$refs);
      if (this.$refs.carousel) {
        // 手动切换幻灯片 setActiveItem(i)(Carousel Methods)
        // 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
        // i 与 name 里面的值绑定 ，i 决定显示那个 name值的 el-carousel-item
        this.$refs.carousel.setActiveItem(i);
        console.log(i);
      }
    },

    end() {
      this.isplay = false;
    },
    translateAudio() {
      if (this.isplay) {
        this.$refs.audio.pause();
        this.audioSrc = "";
        this.isplay = false;
      } else {
        this.audioSrc = "";
        this.isplay = false;
      }
    },
    sleep1(numberMillis) {
      var now = new Date();
      var exitTime = now.getTime() + numberMillis;
      while (true) {
        now = new Date();
        if (now.getTime() > exitTime) return;
      }
    },
    async draw(drawText, i) {
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/api/draw",
        //responseType: 'blob',
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        params: { text: drawText },
        async: false,
      })
        .then((res) => {
          if (i == 0) {
            // 控制播放开始，隐藏暂停按钮
            var player = document.getElementsByClassName("d-player-video-main");
            var playerbutton = document.getElementsByClassName("d-play-btn");
            this.$nextTick(() => {
              // console.log("player", player, "ss", player[0]);
              player[0].play();
              playerbutton[0].style.display = "none";
            });
          }
          this.story[i].pic = res.data.codeStr;
          this.canGenPic = true;
        })
        .catch((err) => {
          console.log("导出失败");
        });
    },
    recordReady: function () {
      console.info("按钮就绪!");
    },
    recordStart: function () {
      console.info("录音开始");
    },
    showResult: function (text) {
      console.info("收到识别结果：", text);
    },
    recordStop: function () {
      console.info("录音结束");
    },
    recordNoResult: function () {
      console.info("没有录到什么，请重试");
    },
    recordComplete: function (text) {
      console.info("识别完成! 最终结果：", text);
      this.inputText = text;
    },
    handlePause() {
      // alert("pause");
      var playerbutton = document.getElementsByClassName("d-play-btn");
      this.$nextTick(() => {
        playerbutton[0].style.display = "none";
      });
    },
    onCanplay() {
      console.log("canplay");
      // alert("canplay");
      var player = document.getElementsByClassName("d-player-video-main");
      var playerbutton = document.getElementsByClassName("d-play-btn");
      this.$nextTick(() => {
        console.log("player", player, "ss", player[0]);
        player[0].pause();
        playerbutton[0].style.display = "none";
      });
    },
    recordFailed: function (error) {
      console.info("识别失败，错误栈：", error);
    },
    async generatePic(lenValue, paraValue, styleValue) {
      if (this.inputText === "") {
        ElMessage({
          message: "请输入您的故事的主题",
          type: "warning",
          offset: 80,
        });
        return;
      }

      this.options.src = "";
      (this.txtArr = [
        { role: "system", content: "You are a helpful assistant." },
      ]),
        (this.isSearch = true);
      this.setActiveItem(0);
      var playerbutton = document.getElementsByClassName("d-play-btn");
      this.$nextTick(() => {
        // console.log("player", player, "ss", player[0]);
        playerbutton[0].style.display = "none";
      });
      console.log("generatePic");
      // this.story = [];
      for (let index = 0; index < paraValue; index++) {
        this.story[index] = { Chinese: "", English: "", pic: "" };
      }
      // this.options.src =
      //   "https://virtual-human-video.oss-cn-beijing.aliyuncs.com/3d_paas%2F20534%2F8d8f05ed-0477-41e9-88d0-8d227af5d5c1%2Fvideo.mp4?Expires=1679925245&OSSAccessKeyId=LTAI5tLFxiQvptGPnfyMfWnX&Signature=xtOp2Hqoy96rZC%2FTv9kpgR9%2FGXI%3D";
      console.log(this.story);
      this.translateToText(this.inputText);
      this.translateToStyle(styleValue);
      // 延时10s执行
      setTimeout(() => {
        this.text =
          this.question1 +
          lenValue +
          this.question2 +
          this.inputText +
          this.question3 +
          paraValue +
          this.question4 +
          this.translateStyle +
          this.question5;

        console.log(this.text);

        this.txtArr.push({
          role: "user",
          content: this.text,
        });
        this.ans = "";
        this.$axios({
          url: "https://api.openai.com/v1/chat/completions",
          method: "post",
          data: {
            // max_tokens: 4000,
            model: "gpt-3.5-turbo",
            messages: this.txtArr,
            temperature: 0.7,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
          },
          headers: {
            "content-type": "application/json",
            Authorization: "Bearer " + this.api,
          },
        })
          .then(async (res) => {
            let i;
            console.log(res);
            let tmpans = res.data.choices[0].message.content;
            if (
              tmpans[0] == "?" ||
              tmpans[0] == "？" ||
              tmpans[0] == "。" ||
              tmpans[0] == "！" ||
              tmpans[0] == "，"
            ) {
              tmpans = tmpans.substring(1, tmpans.length);
            }
            // 去除文本前后空格换行
            tmpans = tmpans.trim();
            //   console.log(tmpans);
            this.ans = tmpans;
            this.testText = this.ans;
            console.log(this.testText);
            var strList = this.testText.split("\n");
            console.log(strList);
            var paraIndex = 0;
            for (i = 0; i < strList.length; i++) {
              var tempPara = {};
              if (
                strList[i][0] === "a" ||
                strList[i][0] === "A" ||
                strList[i][0] === "("
              ) {
                if (strList[i - 1] === "") {
                  tempPara.Chinese = strList[i - 2];
                } else {
                  tempPara.Chinese = strList[i - 1];
                }
                tempPara.English = strList[i];
                tempPara.pic = "";
                let obj = this.story[paraIndex];
                console.log(tempPara.Chinese);
                obj.Chinese = tempPara.Chinese;
                obj.English = tempPara.English;
                obj.pic = tempPara.pic;
                paraIndex += 1;
                // this.story.push(tempPara);
              }
            }
            this.generateVideo(this.story);
            // let inter;
            // this.draw(this.story[0].English, 0);
            let forI = 0;
            for (forI = 0; forI < this.story.length; forI++) {
              console.log(this.story[forI].English);
              await this.draw(this.story[forI].English, forI);
            }
            // for (forI = 0; forI < this.story.length && this.canGenPic; forI++) {
            //   this.canGenPic = false;
            //   console.log(this.story[forI].English);
            //   this.draw(this.story[forI].English, forI);
            // }
            // var j = 1;
            // // let _this = this;
            // inter = setInterval(() => {
            //   console.log(this.story[j].English);
            //   this.draw(this.story[j].English, j);
            //   j += 1;
            //   if (j >= this.story.length) {
            //     clearInterval(inter);
            //   }
            // }, 90000);
          })
          .catch((err) => {
            console.log(err);
          });
      }, 2000);
    },
    generateVideo(msg) {
      // this.options.src = "";
      var contentStr =
        "\n" +
        "可爱的小朋友，你好啊！我是智能语音助手小文，今天由我给你来讲故事啦！" +
        "\n";
      msg.forEach((item) => {
        contentStr += item.Chinese + "\n";
        // contentStr +=
        //   '<speak>请闭上眼睛休息一下<break time="500ms" />好了，请睁开眼睛。</speak>';
      });
      contentStr += "今天的故事讲完啦，小朋友你觉得怎么样呢？";
      this.$axios({
        url: " http://127.0.0.1:8000/api/virtual",
        method: "get",
        params: {
          title: "你们好啊，很高兴见到大家",
          content: contentStr,
        },
      }).then((res) => {
        this.options.src = res.data.msg;
        var player = document.getElementsByClassName("d-player-video-main");
        var playerbutton = document.getElementsByClassName("d-play-btn");
        this.$nextTick(() => {
          // console.log("player", player, "ss", player[0]);
          // player[0].pause();
          playerbutton[0].style.display = "none";
        });
        console.log(res.data.msg);
      });
    },
    refresh() {
      this.LengthValue = "200";
      this.ParaValue = "4";
      this.StyleValue = "卡通";
    },
    confirm() {
      console.log(this.StyleValue);
    },
    changePage(item1, item2) {
      console.log("changePage", item1, item2);
      this.paraIndex = item1;
      if (this.audioSrc) {
        this.$refs.audio.pause();
      }
      this.isplay = false;
      this.audioSrc = "";
      console.log(this.paraIndex);
    },
  },
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: "Zhu";
  src: url("../assets/fonts/MaokenZhuyuanTi.ttf");
}
//.sideContainer{
//  width: 20px;
//  right: 0px;
//  top: 90px;
//  height: 100%;
//  transition: 0.3s;
//  background-color: #2a303c;
//  position: fixed;
//}
//.sideContainer:hover{
//  width: 200px;
//  right: 0px;
//  top: 90px;
//  height: 100%;
//  background-color: #2a303c;
//  color: #a6adba;
//}
/deep/ .set .el-input {
  --el-input-border-color: #cbcfd7;
}

.unique-carousel /deep/ .el-image {
  /* 宽高和最外层 ElCarousel 控件宽高一致 */
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.my-header {
  color: #a6adba !important;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  font-size: 1.5rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/deep/ .el-input {
  color: #a6adba;
  --el-input-border-color: #2a303c;
  --el-input-bg-color: #2a303c;
  height: 50px;
  --el-input-focus-border-color: #404955;
}

/deep/ .el-input__inner {
  color: #a6adba;
  font-weight: 50;
  font-size: 1.1rem;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

/deep/ .el-input-group__append {
  background-color: #191d24;
  box-shadow: none;
  font-weight: 50;
  font-size: 1rem;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

.logo {
  width: 25vh;
  height: 15vh;
  margin: 0 auto;
  z-index: 1;
}

@keyframes scale-up {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.home {
  background: linear-gradient(rgba(14, 14, 14, 0.7), rgba(0, 0, 0, 0.7)),
    url(../assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

/deep/ .el-skeleton.is-animated .el-skeleton__item {
  background: linear-gradient(90deg, #5e6570 25%, #a6adba 37%, #a6adba 63%);
  background-size: 400% 100%;
  animation: el-skeleton-loading 1.4s ease infinite;
}
.dialog-footer {
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}
.txt {
  background-color: #363b46;
  height: auto;
  max-height: 190px;
  border-radius: 10px;
  padding: 1.5% 3.5%;
  overflow: auto;
  line-height: 4vh;
  text-align: justify;
  white-space: pre-wrap;
  animation-name: scale-up;
  color: #a6adba;
  font-weight: 400;
  font-size: 1.3rem;
}
.slogan {
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  font-weight: 100;
  letter-spacing: 10px;
  font-size: 4.5rem;
  line-height: 1;
  color: #c7a46c;
}
.videoPlace {
  width: 100%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
}

.videoPlaceLoading {
  width: 100%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin-top: 12%;
}

.txt:hover {
  overflow-y: auto;
}

.txt {
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 3px;
  }

  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }

  &::-webkit-scrollbar-track {
    // background-color: rgb(42, 44, 48 / 46%);
    background: transparent;
    border-radius: 10px;
  }

  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: #81878f;
    cursor: pointer;
    border-radius: 10px;
  }
}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
// 滚动条整体部分
::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}

// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-track {
  background-color: rgb(42, 44, 48 / 46%);
  border-radius: 10px;
}

// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-thumb {
  background: #81878f;
  cursor: pointer;
  border-radius: 10px;
}

/deep/ .el-dialog__body {
  text-align: center;
}

.txtLoad {
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  letter-spacing: 1px;
}

.txtLoad span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 1.15em;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0% {
    transform: translateY(0px);
    color: #475669;
  }

  20% {
    transform: translateY(-15px);
    color: #a6adba;
  }

  40%,
  100% {
    transform: translateY(0px);
    color: #fff;
  }
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
</style>
